<template>
    <div class="contextmenu">
        <ul @mouseup="mouseUp">
            <li v-if="currentElementList.length" @mousedown="mouseDown" @mouseup="copy">复制</li>
            <li v-if="currentElementList.length" @mousedown="mouseDown" @mouseup="cut">剪切</li>
            <li v-if="copyElementList.length" @mousedown="mouseDown" @mouseup="paste">粘贴</li>
            <li v-if="currentElementList.length" @mousedown="mouseDown" @mouseup="removeElement">删除</li>
            <li v-if="currentElementList.length === 1" @mousedown="mouseDown" @mouseup="topElement">置顶</li>
            <li v-if="currentElementList.length === 1" @mousedown="mouseDown" @mouseup="bottomElement">置底</li>
            <li v-if="currentElementList.length === 1" @mousedown="mouseDown" @mouseup="upElement">上移</li>
            <li v-if="currentElementList.length === 1" @mousedown="mouseDown" @mouseup="downElement">下移</li>
            <li v-if="currentElementList.length" @mousedown="mouseDown" @mouseup="lock">锁定</li>
            <li v-if="currentElementList.length" @mousedown="mouseDown" @mouseup="unlock">解锁</li>
            <li v-if="currentElementList.length > 1 && currentElementList[0].component !== 'Group'" @mousedown="mouseDown" @mouseup="compose">组合</li>
            <li v-if="currentElementList.length === 1 && currentElementList[0].component == 'Group' && !currentElementList[0].attribute.locked" @mousedown="mouseDown" @mouseup="deCompose">拆分</li>
        </ul>
    </div>
</template>

<script>
import store from '@/js/store/state.js';
import shortcut from '@/js/main/shortcut.js';
import history from '@/js/main/history.js';
import bus from '@/js/event/bus.js';

export default {
    data() {
        return {
            currentElementList: store.getCurrentElementList(),
            copyElementList: shortcut.getCurrentElementList()
        };
    },
    methods: {
        lock(e) {
            shortcut.setElementLock(true);
        },
        unlock(e) {
            shortcut.setElementLock(false);
        },
        mouseUp(e) {
            bus.hideContext();
        },
        cut(e) {
            shortcut.copyElementList(true);
        },
        copy(e) {
            shortcut.copyElementList(false);
        },
        paste(e) {
            shortcut.pasteElementList();
        },
        removeElement(e) {
            shortcut.removeElement();
        },
        compose(e) {
            shortcut.composeElementList();
        },
        deCompose(e) {
            shortcut.deComposeElement();
        },
        upElement(e) {
            if (this.currentElementList.length == 1) {
                let from = store.getElementSortIndex(this.currentElementList[0]);
                store.moveElementSort(from, from - 1);
                store.sortElementList();
                history.addHistory(store.clone(), 3);
            }
        },
        downElement(e) {
            if (this.currentElementList.length == 1) {
                let from = store.getElementSortIndex(this.currentElementList[0]);
                store.moveElementSort(from, from + 1);
                store.sortElementList();
                history.addHistory(store.clone(), 3);
            }
        },
        topElement(e) {
            if (this.currentElementList.length == 1) {
                let from = store.getElementSortIndex(this.currentElementList[0]);
                store.moveElementSort(from, 0);
                store.sortElementList();
                history.addHistory(store.clone(), 3);
            }
        },
        bottomElement(e) {
            if (this.currentElementList.length == 1) {
                let from = store.getElementSortIndex(this.currentElementList[0]);
                store.moveElementSort(from, store.getElementSortList().length - 1);
                store.sortElementList();
                history.addHistory(store.clone(), 3);
            }
        },
        mouseDown(e) {
            e.stopPropagation();
            e.preventDefault();
        }
    }
};
</script>

<style lang="scss" scoped>
.contextmenu {
    position: absolute;
    z-index: 1000;
    ul {
        border-radius: 4px;
        background-color: #ffffff;
        box-shadow: 0 2px 12px 0 #0000001a;
        box-sizing: border-box;
        margin: 5px 0;
        padding: 6px 0;

        li {
            font-size: 14px;
            padding: 0 20px;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #606266;
            height: 34px;
            line-height: 34px;
            box-sizing: border-box;
            cursor: pointer;

            &:hover {
                background-color: #f5f7fa;
            }
        }
    }
}
</style>